import { App } from "vue";
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import LoginVue from "../view/Login/index.vue";
import { useUserStore } from "../store";
import { user } from "../api";

const routes: RouteRecordRaw[] = [
    {
        path:'/',
        redirect:'/login'
    },
  {
    path: "/login",
    name: "login",
    // 一般来说，项目的第一个进入的页面不要使用 路由懒加载
    component: LoginVue,
  },
  {
    path: "/home",
    name: "home",
    component: () => import("../view/home/index.vue"),
    children: [],
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 一般控制动态的路由是写在 全局前置守卫里面
router.beforeEach((to, from, next) => {
  //   console.log(from);

  // pinia 里面的数据，一定要在 函数部分使用 useXXX 获取
  const userStore = useUserStore();
  let token = localStorage.getItem("token");
  console.log("beforeEach");

  // 无论是登录后，还是 刷新后， 只要token还在就需要保持 用户的 菜单数据要有
  // 让路由每次跳转的时候，都检查一下，有没有 菜单数据 ，如果没有就需要重新请求
  //   如果是刷新后，from.path 永远是 /
  if (token && userStore.menus.length === 0 && (from.path === "/" || from.path === "/login")) {
    // 登录成功后，需要请求用户的菜单数据
    user.userInfoApi().then((res) => {
      if (res.code === 200) {
        // 得到了 该用户所有的菜单数据 等等
        // 把数据存到 pinia
        // console.log(res.data);
        userStore.menus = res.data.menus;
        // 菜单数据回来了，可以生成动态路由了
        userStore.activeMenus.forEach((parent) => {
          const route: RouteRecordRaw = {
            // parent是一级菜单，一级菜单对应一级路由
            path: "/" + parent.name,
            name: parent.name,
            // 注意： 所有的一级路由其实都是对应 home/index.vue
            component: () => import("../view/home/index.vue"),
            children: [],
          };
          //   然后添加子路由
          parent.children?.forEach((child) => {
            route.children.push({
              // path ===>  /一级/二级
              path: `/${parent.name}/${child.name}`,
              name: child.name,
              component: () =>
                import(`../view/${parent.name}/${child.name}.vue`),
            });
          });
          // addRoute方法添加路由配置不是同步生效的，需要我们等等再进入
          router.addRoute(route);
          next(to.path);
        });
      }
    });
    
  }

  // 要在登录成功后，动态地生成 当前用户能访问的路由
  // 什么时候是用户登录成功了？ 1. token存在 ,2. store里面的menus有数据
  // 但是为了避免 切换路由的时候，重复地进入这个判断，我们需要在只有是登录后 或者是 刷新后 才进入生成动态路由
  //   else if (token && userStore.menus.length > 0) {
  //     //   需要需要动态生成路由了 - addRoute方法专门用来动态添加路由配置的
  //     //   我们要向里面添加的路由对象，要长成下面这样
  //     //   {
  //     //       path: "/ums",
  //     //       name: "ums",
  //     //       component: () => import("../view/Home/index.vue"),
  //     //       children: [
  //     //           {
  //     //               path: '/ums/admin',
  //     //               name : 'admin',
  //     //               component : () => import("../view/ums/admin.vue"
  //     //           }
  //     //       ],
  //     //     }

  //     //   生成 对应格式的路由配置对象

  //     // console.log('');
  //     // next如果传递参数，会再次触发 beforeEach 的执行
  //     next("/ums/admin");
  //   }
  else {
    next();
  }
});

export default (app: App<Element>) => {
  app.use(router);
};